<template>
	<div>
		<fitler-mask :columns="columns2" @on-value="handleSearch" @on-refresh="handleRefresh"></fitler-mask>
		<Table border :columns="columns1" :data="filterData" :loading="loadTable"></Table>
	</div>
</template>

<script>
import querystring from 'querystring';
import { HOST } from '../../libs/config.js';
import { loginInvalid } from "../../libs/loginInvalidNotice.js";
import fitlerMask from '../main-components/filtermask';
export default {
  components: {
    fitlerMask
  },
	data() {
		return {
      statusList: [
        '未审核',
        '审核通过',
        '驳回'
      ],
      filterList: {
        project_name: '',
        goods_name: '',
      },
      loadTable: false,
      columns2: [{
          title: '所属项目',
          key: 'project_name',
        },
        {
          title: '物品名称',
          key: 'goods_name',
        },


      ],
			columns1: [
        {
					title: '所属项目',
          key: 'project_name',
          align: 'center',
					width: 150
				},
				{
					title: '物品名称',
          key: 'goods_name',
          align: 'center',
          
        },
        {
          title: '数量',
          key: 'num',
          align: 'center',
          
        },
        {
          title: '提交时间',
          key: 'time',
          align: 'center',
          render: (h, params) => {
            return h('span', new Date(parseInt(params.row.time) * 1000).toLocaleString());
          }
        },
				{
          title: '状态',
          key: 'status',
					fix: 'right',
					align: 'center',
					render: (h, params) => {
						return h('Tag', {
						  props: {
						    color: this.getColor(params.row.status)
						  },
						}, this.statusList[parseInt(params.row.status)])
          },
        },
        {
          title: '.',
          align: 'center',
          render: (h, params) => {
            return h('Poptip', {
              props: {
                placement: 'left'
              }
            }, 
            [
              h('i-button', {
                domProps: {
                  disabled: params.row.status !== '0'
                },
                props: {
                  type: 'success'
                }
              }, '审核'),
              h('div', {
                slot: 'content'
              },[
                h('i-input',{
                  props: {
                    type: 'textarea'
                  },
                  attrs: {
                    placeholder: '如若驳回,可在此输入驳回理由'
                  }
                }),
                h('br'),
                h('div', {
                  style: {
                    display: 'flex',
                    'justify-content': 'space-between'
                  }
                }, 
                [
                  h('i-button', {
                    props: {
                      type: 'error'
                    },
                    on: {
                      click: (e) => {
                        let value = e.target.parentElement.parentElement.parentElement.querySelector('textarea').value;
                        this.$axios.post(HOST + '/store/receiveCheck',
                            querystring.stringify({
                              're_id': params.row.re_id,
                              'action': 0,
                              'comment': value
                            }), {
                              withCredentials: true
                            })
                          .then((response) => {
                            if (response.data.status === 'success') {
                              this.refreshReceivelist();
                              this.$Notice.success({
                                title: '审核成功',
                                duration: 2
                              });
                            } else {
                              this.$Notice.error({
                                title: '审核失败',
                                duration: 2
                              });
                            }
                          })
                          .catch((err) => {
                            if (err.data.status === 'invalid Token') {
                              loginInvalid(this)();
                            }
                          })
                      }
                    }
                  }, '驳回'),
                  h('i-button', {
                    props: {
                      type: 'success'
                    },
                    on: {
                      click: (e) => {
                        this.$axios.post(HOST + '/store/receiveCheck',
                            querystring.stringify({
                              're_id': params.row.re_id,
                              'action': 1,
                              'comment': ''
                            }), {
                              withCredentials: true
                            })
                          .then((response) => {
                            if (response.data.status === 'success') {
                              this.refreshReceivelist();
                              this.$Notice.success({
                                title: '审核成功',
                                duration: 2
                              });
                            } else {
                              this.$Notice.error({
                                title: '审核失败',
                                desc: '领用数量不合法',
                                duration: 2
                              });
                            }
                          })
                          .catch((err) => {
                            if (err.data.status === 'invalid Token') {
                              loginInvalid(this)();
                            }
                          })
                      }
                    }
                  }, '通过')
                ])
              ])
            ])
          }
        }
			],
			data4: []
		}
	},
	methods: {
		refreshReceivelist() {
			this.loadTable = true;
			this.$axios.get(HOST + '/store/receiveTable', {
					withCredentials: true
				})
				.then((response) => {
					this.loadTable = false;

					let data = response.data;
					if (data.length > 0) {
						this.data4 = data;
					}
				})
				.catch((err) => {
					if (err.data.status && err.data.status === 'invalid Token') {
						loginInvalid(this)();
					} else {

					}
				})
		},
    getColor(status) {
      if (status === '0') {
        return 'gray';
      } else if (status ===  '1') {
        return 'green';
      } else {
        return 'red';
      }
    },
    handleSearch(value) {
      for (let key in value) {
        this.filterList[key] = value[key];
      }
      this.$forceUpdate();
    },
    handleRefresh() {
      for (let key in this.filterList) {
        this.filterList[key] = '';
      }
      this.$forceUpdate();
    }
  },
  computed: {
    filterData() {
      let fList = Object.keys(this.filterList);
      const filterList = this.filterList;
      if (fList.length > 0) {
        console.log(fList);
        return this.data4.filter((item) => {
          return fList.every((key) => {
            return item[key].indexOf(filterList[key]) !== -1;
          })
        })
      }
      return this.data4;
    }
  },
	mounted() {
		this.refreshReceivelist();
  }
}
</script>
